<template>
  <div class="edit-personal-home">
    <div class="g-content">
      <ul class="menu">
        <li :class="['content', menuActive == index ? 'active-content' : '']" v-for="(item, index) in menuList" :key="index" @click="handleMenu(index)">
          {{ item }}
        </li>
      </ul>
      <div class="g-form">
        <!-- <PersonInfo v-show="menuActive == 0" /> -->
        <AdminWorks ref="adminWorksRef" v-show="menuActive == 0 && isArt" />
        <VideoAdmin ref="videoAdminRef" v-show="menuActive == 1 && isArt" />
        <ActivityAdmin v-show="menuActive == 3 && isArt" />
        <DraftBox @goWorks="goWorks" v-show="menuActive == 2 && isArt" />
        <Essay ref="essayRef" v-show="menuActive == 4 && isArt" />
      </div>

    </div>
  </div>
</template>

<script>
import PersonInfo from './component/personInfo'
import AdminWorks from './component/adminWorks'
import VideoAdmin from './component/videoAdmin'
import DraftBox from './component/draftBox.vue'
import Essay from './component/essay.vue'
import ActivityAdmin from './component/activityAdmin'
import { getToken } from '@/utils/auth.js'
export default {
  scrollToTop: true,
  // 在路由匹配组件渲染之前会先执行中间件处理
  middleware: 'identityInfo',
  name: 'edit-personal-home',
  components: {
    PersonInfo,
    AdminWorks,
    VideoAdmin,
    ActivityAdmin,
    DraftBox,
    Essay
  },
  data() {
    return {
      menuList: [
        // '个人信息',
        '作品上传',
        '相关视频上传',
        '草稿箱',
        '专题活动管理',
        '博文广记'
      ], // 左侧菜单
      menuActive: 0,
      isArt: false
    }
  },
  mounted() {
    this.isArt = this.$store.state.user?.info?.user_info?.user_type - 0 === 2 || this.$store.state.user?.info?.user_info?.user_type - 0 === 0
    // if (!this.isArt) {
    //   this.menuList = ['个人信息']
    // }
    if (this.$route.query.menuActive) {
      this.menuActive = this.$route.query.menuActive
    }
    console.log(getToken())
  },
  methods: {
    // 点击左侧菜单
    handleMenu(index) {
      this.menuActive = index
      if (index === 4) {
        this.$refs.essayRef.handleMenu(1);
      }
    },
    goWorks(menuActive, data_id) {
      this.menuActive = menuActive;
      console.log(this.menuActive);
      if (menuActive === 0) {
        this.$refs.adminWorksRef.goEdit(data_id);
      } else {
        this.$refs.videoAdminRef.goEdit(data_id);
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .edit-personal-home {
    padding-bottom: 120px;

    .g-content {
      padding: 120px 276px 0;
      display: flex;

      .menu {
        height: 100%;
        margin-right: 90px;

        .content {
          width: 150px;
          line-height: 24px;
          margin-bottom: 37px;
          font-size: 24px;
          color: #999;
          cursor: pointer;
          list-style-type: none;

          &.active-content {
            color: #000;
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      .g-form {
        width: 1152px;
      }
    }
  }
</style>
